<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>餐厅信息</title>

    <link th:href="@{/css/base.css}" rel="stylesheet" type="text/css">
    <link th:href="@{/css/header.css}" rel="stylesheet" type="text/css">
    <link th:href="@{/css/banner.css}" rel="stylesheet" type="text/css">
    <link th:href="@{/css/mask.css}" rel="stylesheet" type="text/css">
    <link th:href="@{/css/introduce.css}" rel="stylesheet" type="text/css">
    <link th:href="@{/css/dishes.css}" rel="stylesheet" type="text/css">
    <link th:href="@{/css/copyright.css}" rel="stylesheet" type="text/css">
    <script th:src="@{/js/jquery-1.11.1.min.js}"></script>
    <script th:src="@{/js/menu.js}"></script>
    <script th:src="@{/js/ajax_load_day_info.js}"></script>
    <script th:src="@{/js/ajax_load_meal_time.js}"></script>
    <script th:src="@{/js/banner.js}"></script>
    <script th:src="@{/js/copyright.js}"></script>

</head>

<body>

<div th:replace="header :: header"></div>
<div th:replace="banner :: banner"></div>
<div th:replace="mask :: mask"></div>
<div th:replace="introduce::introduce"></div>
<div th:replace="dishes::dishes"></div>


<div th:replace="copyright :: copyright"></div>


<script th:inline="javascript" type="text/javascript">

    //餐厅的id号
    var drId = [[${diningroomId}]];
    var copyright = $("#copyright");
    var copyrightHeight = $("#copyright").height();
    var ul = $("#banner_box ul");
    var countHeight = 0;


    var ajaxBannerInterval;

    flushGoods();
    flushFreeSeas();
    flushBanner();


    /**
     *  ajax定时刷新页面局部数据
     */
    function flushGoods() {

        setTimeout(function () {
            $.ajax({
                type: 'get',
                async: true,
                url: '/goods/drGoodsInfo/' + drId,
                data: new Date,
                contentType: "application/json;charset=utf-8",
                timeout: 10000,
                success: function (data) {
//                刷新菜品数据
                    putDataIntoHtml(data);

//                    loadCopyright(contentHeight);
                    loadCopyrightFirst();
//                    maskEffects();
                    accordingEffects();
                },
                error: function () {
                    alert("失败，请稍后再试！");
                },
            });

        }, 500);

        setInterval(function () {
            $.ajax({
                type: 'get',
                async: true,
                url: '/goods/drGoodsInfo/' + drId,
                data: new Date,
                contentType: "application/json;charset=utf-8",
                timeout: 10000,
                beforeSend: function () {
                    $(".first_ul").empty();
                },
                success: function (data) {
//                刷新菜品数据
                    putDataIntoHtml(data);

                    loadCopyright(countHeight);
                    countHeight = 0;
//                    maskEffects();
                    accordingEffects();
                },
                error: function () {
                    alert("失败，请稍后再试！");
                }
            });

        }, 1000 * 60 * 60);
    }

    /**
     *
     * 把ajax返回的数据放进嵌套的ul li中显示
     */
    function putDataIntoHtml(data) {
        var firstli = "";
        var secondli = "";

        $(data).each(function (i, value) {
            firstli = '<li class="block" id="list">' +
                    '<div class="typeName">' + data[i].typeName + '</div>' +
                    '<span id="span">+</span>' +
                    '<ul class="second_ul"></ul>' +
                    '</li>';
            $(".first_ul").append(firstli);

            var drGoodsJsonList = data[i].drGoodsJsonList;

            $(drGoodsJsonList).each(function (j) {
                secondli = '<li id="second_li">' +
                        '<a href="/view/diningroom/' + drId + '/goods/' + drGoodsJsonList[j].spId + '">' +
                        '<div class="box">' +
                        '<img id="goodsImg" src="/myResources/GoodsPic/' + drGoodsJsonList[j].spPic + '" alt="">' +
                        '<font id="goodsNameVal">' + drGoodsJsonList[j].spName + '</font>' +
                        '<p id= "goodsFWVal">' + '口味：' + drGoodsJsonList[j].spFlavor + '</p>' +
                        '<input type="button" value="》》了解更多"/>' +
                        '</div>' +
                        '</a>' +
                        '</li>';
//                'src="/GoodsPic/' + drInfo.drPic + '" alt="">' +
                $("body").find(".second_ul").eq(i).append(secondli);
            });

            $(".box #goodsImg").bind("error", function () {
                this.src = "/image/error.jpg";
            });
        });


    }

    /**
     * 手风琴效果
     */
    function accordingEffects() {
        var div = $(".typeName");
        var span = $(".block #span");

        //手风琴效果可显示多项
        div.click(function () {
            var ulHeight = $(this).siblings(".second_ul ").height();

            if ($(this).siblings(".second_ul").hasClass('open')) {
                $(this).siblings(".second_ul").slideUp(200).removeClass("open");
                $(this).siblings("#span").html('+');
                countHeight -= ulHeight;


                //每次动态加载，div的长度会发生变化，连带着影响到footer的位置
                var contentHeightOpen =
                        Math.max(document.documentElement.scrollHeight, document.body.scrollHeight);
                copyright.css({
                    "margin-top": (contentHeightOpen - copyrightHeight) - ulHeight
                });

            } else {
                $(this).siblings(".second_ul").slideDown(200).addClass("open");
                $(this).siblings("#span").html("-");

                countHeight += ulHeight;
                //每次动态加载，div的长度会发生变化，连带着影响到footer的位置
                var contentHeightClose =
                        Math.max(document.documentElement.scrollHeight, document.body.scrollHeight);
                copyright.css({
                    "margin-top": (contentHeightClose - copyrightHeight) + ulHeight
                });

            }
        });


        // //      手风琴效果只显示一项
//        div.click(function (i) {
//
//            if ($(this).siblings("ul").hasClass('open')) {
//                $(this).siblings("ul").slideUp((size % 4) * 315).removeClass("open");
//
//                $(this).siblings("#span").html('+');
//
//            } else {
//                // 首先要清除其他ul标签的open类名
//                $(this).parent().siblings().children("ul").removeClass("open");
//                // on类名是随便起的，也可是active什么的都行
//                $(this).siblings("ul").slideDown((size % 4) * 315).addClass("open")
//                        .parent().siblings().children("ul").slideUp((size % 4) * 315);
//
//                $(this).parent().siblings().children("#span").html("+");
//                $(this).siblings("#span").html("-");
//            }
//        });
//


        /**
         * 刷新餐厅进出人数 每隔10 000ms
         */
        function flushFreeSeas() {
            var drMealNum = $("#drMealNum");
            var drFreeNum = $("#drFreeNum");
            var recommendedMealTime = $("#recommendedMealTime");

            setTimeout(function () {
                $.ajax({
                    type: 'get',
                    url: '/restaurant/drInfo/' + drId,
                    async: true,
                    data: new Date(),
                    contentType: 'application/json;charset=utf-8',
                    timeout: 10000,
                    success: function (data) {
                        drMealNum.append(data.drInfo.drMealNum);
                        drFreeNum.append(data.drInfo.drFreeNum);
                        recommendedMealTime.append(data.recommendedMealTime);
                    },
                    error: function () {
                        alert("失败，请稍后再试！");
                    }
                });

                setTimeout(function () {
                    $.ajax({
                        type: 'get',
                        url: '/restaurant/drInfo/' + drId,
                        async: true,
                        data: new Date(),
                        contentType: 'application/json;charset=utf-8',
                        timeout: 10000,
                        beforeSend: function () {
                            drFreeNum.html("");
                            recommendedMealTime.html("");
                        },
                        success: function (data) {
                            drFreeNum.append(data.drInfo.drFreeNum);
                            recommendedMealTime.append(data.recommendedMealTime);
                        },
                        error: function () {
                            alert("失败，请稍后再试！");
                        }
                    });
                }, 30000)

            }, 500)
        }

        function flushBanner() {
            setTimeout(function () {
                $.ajax({
                    type: 'get',
                    url: '/goods/daily/recommend/' + drId,
                    async: true,
                    data: new Date(),
                    contentType: 'application/json;charset=utf-8',
                    timeout: 10000,
                    success: function (data) {
                        putPathIntoImg(data);
                        timerTimeout(0);
                    },
                    error: function () {
                        alert("失败，请稍后再试！");
                    }
                });

            }, 1000)


            loadAjaxBanner();

        }

        function loadAjaxBanner() {
            ajaxBannerInterval = setInterval(function () {
                $.ajax({
                    type: 'get',
                    url: '/goods/daily/recommend/' + drId,
                    async: true,
                    data: new Date(),
                    contentType: 'application/json;charset=utf-8',
                    timeout: 10000,
                    beforeSend: function () {
                        ul.empty();
                    },
                    success: function (data) {
                        clearTimer(timerId);
                        putPathIntoImg(data);
                        timerInterval(-1);
                    },
                    error: function () {
                        alert("失败，请稍后再试！");
                    }
                });
            }, 1000 * 60)
        }

        function putPathIntoImg(data) {
            var li = "";
            $(data).each(function (i) {
                var path = data[i].spPic;
//            if (path == "" || path == null) {
//                path = "/image/error.jpg";
//            }

                li = '<li id="banner_li">' +
                        '<a href="/view/diningroom/' + drId + '/goods/' + data[i].spId + '">' +
                        '<img id="banner_image" src="/myResources/GoodsPic/' + path + '" alt="' + i + '" />' +
                        '</a>' +
                        '</li>';
//            li = '<li class="banner_li" ><a href="https://www.baidu.com/"><img id="banner_image" src="" alt="' + i + '" /></a></li>';
                ul.append(li);
            });

            $("#banner_li img").bind("error", function () {
                this.src = "/image/error.jpg";
            });

            /** 加载厨师长推荐图标  **/
            loadTodayRecommend();
        }

        /**　厨师长推荐图标  **/
        function loadTodayRecommend() {
            var uLi = $("#banner_box ul li");
            if (uLi.length != 0 && uLi.length != null && uLi.length > 0) {
                $("#today_recommend").fadeIn();
            }
        }
    }


</script>

<script th:src="@{/js/banner.js}"></script>

</body>

</html>
